﻿<extend name="Public:office" />
<block name="title"><title>任务管理</title></block>
<block name="header_styles">
    <link href="__Public__/js/kendo.ui/kendo.bootstrap.min.css" rel=" stylesheet" />
    <link href="__Public__/js/kendo.ui/kendo.common-bootstrap.min.css" rel=" stylesheet" />
    <script type="text/javascript" src="__Public__/js/kendo.ui/cultures/kendo.culture.zh-CN.min.js"></script>
</block>
<block name="main">
    <div class="task-container">
        <ul class="task-menu">
            <li><a href="{:U('/Html')}">任务管理</a></li>
            <li>  |  </li>
            <li class="active"><a href="javascript:void(0);">任务统计</a></li>
        </ul>
        <div class="task-body" style="border:none;">
            <br />
            <div class="task-total text-center">
                <div>Total</div>
                999
            </div>
            <br /><br />
            <div class="row">
                <div class="col-sm-3">
                    <div class="task-summary">
                        <canvas id="myCanvas1" width="210" height="210"></canvas>
                        <div class="task-total text-center radius-counter" data-targetid="myCanvas1" data-percent="45">
                            10
                            <div>未开始</div>
                        </div>
                        <ul>
                            <li><a href="#"><span>【执行】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【执行】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【执行】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【执行】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【发布】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【发布】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【发布】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【抄送】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【抄送】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【抄送】</span>首页原型设计首页原型设计首页原型设计</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="task-summary">
                        <canvas id="myCanvas2" width="210" height="210"></canvas>
                        <div class="task-total text-center radius-counter" data-targetid="myCanvas2" data-percent="100">
                            40
                            <div>进行中</div>
                        </div>
                        <ul>
                            <li><a href="#"><span>【执行】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【执行】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【执行】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【执行】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【发布】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【发布】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【发布】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【抄送】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【抄送】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【抄送】</span>首页原型设计首页原型设计首页原型设计</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="task-summary">
                        <canvas id="myCanvas3" width="210" height="210"></canvas>
                        <div class="task-total text-center radius-counter" data-targetid="myCanvas3" data-percent="90">
                            30
                            <div>已提交</div>
                        </div>
                        <ul>
                            <li><a href="#"><span>【执行】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【执行】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【执行】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【执行】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【发布】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【发布】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【发布】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【抄送】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【抄送】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【抄送】</span>首页原型设计首页原型设计首页原型设计</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="task-summary">
                        <canvas id="myCanvas4" width="210" height="210"></canvas>
                        <div class="task-total text-center radius-counter" data-targetid="myCanvas4" data-percent="10">
                            20
                            <div>已验收</div>
                        </div>
                        <ul>
                            <li><a href="#"><span>【执行】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【执行】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【执行】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【执行】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【发布】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【发布】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【发布】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【抄送】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【抄送】</span>首页原型设计首页原型设计首页原型设计</a></li>
                            <li><a href="#"><span>【抄送】</span>首页原型设计首页原型设计首页原型设计</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</block>
<block name="footer_scripts">
    
    <script type="text/javascript">
        require(["jquery"], function () {

            $(".radius-counter").each(function () {
                var targetId = $(this).data("targetid");
                var current = $(this).data("percent") / 100;
                var c = document.getElementById(targetId);
                var canvas2d = c.getContext("2d");
                canvas2d.beginPath();
                canvas2d.arc(100, 100, 75, -0.5 * Math.PI, current * (2 * Math.PI) - Math.PI / 2, false);
                canvas2d.fillStyle = "#42b866";
                canvas2d.lineTo(100, 100);
                canvas2d.fill();
                canvas2d.closePath();
            });
        });
    </script>
</block>
